<template>
  <div class="journal">
    <span style="font-size: 18px">{{ title }}</span>
    <div style="display: flex; align-items: center">
      <div
        style="
          width: 6px;
          height: 6px;
          background: #409eff;
          border-radius: 4px;
          margin: 10px 0;
        "
      ></div>
      <span style="margin-left: 10px">待办事项</span>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 31.6vw;
        "
      >
        <div
          style="
            width: 6px;
            height: 6px;
            background: #409eff;
            border-radius: 4px;
            margin: 10px 0;
          "
        ></div>
        <span style="margin-left: 10px">2022进度安排</span>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 22.4vw;
          "
        >
          <div
            style="
              width: 6px;
              height: 6px;
              background: #409eff;
              border-radius: 4px;
              margin: 10px 0;
            "
          ></div>
          <span style="margin-left: 10px">通知公告</span>
        </div>
      </div>
    </div>
    <div>
      <el-dialog
        title="请假申请"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div style="display: flex; flex-direction: column">
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <span>请假人:</span><span>kooriookami</span>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <span>请假人手机号码:</span><span>18100000000</span>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <span>请假去向:</span><span>苏州市</span>
          </div>

          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <el-tag size="small">部门</el-tag><span>人事部</span>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <span>请假人住址:</span>
            <span>江苏省苏州市吴中区吴中大道 1188 号</span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="bh()">驳回</el-button>
          <el-button type="primary" @click="ty()">同意</el-button>
        </span>
      </el-dialog>
    </div>
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div class="bg">
        <div class="block">
          <el-calendar
            style="height: 50vh; overflow-y: scroll"
            :range="['2022-05-04', '2022-05-24']"
          ></el-calendar>
          <div
            style="
              margin-top: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 20px;
            "
          >
            <el-button
              type="warning"
              icon="el-icon-document-copy"
              circle
            ></el-button>
            <div
              style="
                display: flex;
                flex-direction: column;
                margin-left: 10px;
                width: 430px;
              "
              @click="tomore()"
            >
              <span style="margin-bottom: 4px">请假申请</span>
              <span style="font-size: 14px; color: #555"
                >{{ personnel }}向您发来申请~</span
              >
            </div>
            <el-badge
              :value="1"
              class="item"
              style="margin-top: 15px"
            ></el-badge>
          </div>
          <div
            style="
              margin-top: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <el-button type="primary" icon="el-icon-s-check" circle></el-button>
            <div
              style="
                display: flex;
                flex-direction: column;
                margin-left: 10px;
                width: 430px;
              "
            >
              <span style="margin-bottom: 4px">审核申请</span>
              <span style="font-size: 14px; color: #555"
                >{{ personnel2 }}向您发来申请~</span
              >
            </div>
            <el-badge
              :value="1"
              class="item"
              style="margin-top: 15px"
            ></el-badge>
          </div>
        </div>
      </div>

      <div class="bga">
        <div class="block">
          <el-card class="box-card" shadow="hover" style="margin-bottom: 30px">
            <div slot="header" class="clearfix">
              <span>5月份</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >查看详细</el-button
              >
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div>
          </el-card>
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>6月份</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >查看详细</el-button
              >
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div>
          </el-card>
        </div>
      </div>
      <div class="bgs">
        <el-card
          shadow="hover"
          style="
            background: #ecf5ff;
            margin-top: 10px;
            width: 90%;
            display: flex;
          "
          v-for="(item, index) in noticelist"
          :key="index"
        >
          <div style="margin-bottom: 5px">
            <i
              class="el-icon-time"
              style="color: #409eff; margin-right: 4px"
            ></i>
            <span style="color: #999">{{ item.times }}</span>
          </div>
          <span style="padding: 15px">{{ item.content }}</span>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      title: "日志管理",
      dialogVisible: false,
      personnel: "陈念",
      personnel2: "温婉",
      noticelist: [
        {
          times: "2022-05-04 8:00",
          content: "开会",
        },
        {
          times: "2022-05-04 8:00",
          content: "开会",
        },
        {
          times: "2022-05-04 8:00",
          content: "开会",
        },
        {
          times: "2022-05-04 8:00",
          content: "开会",
        },
        {
          times: "2022-05-04 8:00",
          content: "开会",
        },
        {
          times: "2022-05-04 8:00",
          content: "开会",
        },
      ],
    };
  },
  methods: {
    tomore() {
      //申请内容弹窗
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    bh() {
      this.dialogVisible = false;
      this.$message({
        showClose: true,
        message: "已驳回",
        type: "success",
      });
    },
    ty() {
      this.dialogVisible = false;
      this.$message({
        showClose: true,
        message: "已同意",
        type: "success",
      });
    },
  },
};
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 26.5vw;
}
.journal {
  padding: 30px;
  background: #f0f2f5;
  height: 93vh;
  overflow-y: scroll;
}
.bg {
  background: #fff;
  width: 35vw;
  height: 78vh;
  margin-top: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bga {
  background: #fff;
  width: 28vw;
  height: 78vh;
  border-radius: 8px;
  margin-top: 10px;
}
.bgs {
  background: #fff;
  width: 17vw;
  height: 78vh;
  border-radius: 8px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.block {
  margin: 10px;
  display: flex;
  flex-direction: column;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
* {
  caret-color: rgba(0, 0, 0, 0);
}
</style>